<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/assets/home/css/bootstrap.css">
  <link rel="stylesheet" href="/assets/home/css/base.css">
  <link rel="stylesheet" href="/assets/home/css/index.css">
  <link rel="stylesheet" href="/assets/home/css/swiper-3.4.2.min.css">
  <link rel="stylesheet" href="/assets/home/css/animate.css">
  <link rel="stylesheet" href="/assets/home/css/reset.css">

  <script src="/assets/home/js/jquery-3.2.1.js"></script>
  <script src="/assets/home/js/swiper-3.4.2.min.js"></script>
  <script src="/assets/home/js/base.js"></script>
  <script src="https://hm.baidu.com/hm.js?8ba61eb2776cd6ce4e8ee4f549cda8b6"></script>
  <script src="/assets/js/kf.js"></script>
  <title>在线下单</title>

</head>

<body>
  <header>
    {include file="common/header" /}
  </header>

  <section class="order">

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="/assets/home/imgs/img%20(8).png"></div>
      </div>
    </div>


    <div class="order-main">
      <div class="left">
        <p class="title">Digital Strategies</p>
        <p class="title">With Result</p>
        <button class="btn">More Information</button>
      </div>
      <form action="" method="post">
        <input type="hidden" name="name" value="add">

        <ul class="right">
          <li>
            <div class="left-item">
              <p class="title">想拍什么片：</p>
              <select class="select" name="film_class">
                {volist name="site.vod_type" id="vo" key="key"}
                <option value="{$key}">{$vo}</option>
                {/volist}
              </select>
            </div>
            <div class="right-item">
              <p class="title">时长：</p>
              <select class="select" name="duration">
                {volist name="site.vod_time" id="vo" key="key"}
                <option value="{$key}">{$vo}</option>
                {/volist}
              </select>
            </div>
          </li>
          <li>
            <div class="left-item">
              <p class="title">拍摄设备：</p>
              <select class="select" name="equipment">
                {volist name="site.vod_tool" id="vo" key="key"}
                <option value="{$key}">{$vo}</option>
                {/volist}
              </select>
            </div>
            <div class="right-item">
              <p class="title">演员：</p>
              <select class="select" name="performer">
                {volist name="site.vod_people" id="vo" key="key"}
                <option value="{$key}">{$vo}</option>
                {/volist}
              </select>
            </div>
          </li>
          <li>
            <div class="left-item">
              <p class="title">导演团队：</p>
              <select class="select" name="team">
                {volist name="site.vod_direct" id="vo" key="key"}
                <option value="{$key}">{$vo}</option>
                {/volist}
              </select>
            </div>
            <div class="right-item">
              <p class="title">配音：</p>
              <select class="select" name="dubbing">
                {volist name="site.vod_audio" id="vo" key="key"}
                <option value="{$key}">{$vo}</option>
                {/volist}
              </select>
            </div>
          </li>
          <li>
            <div class="left-item">
              <p class="title">联系人：</p>
              <input data-flag='0' class="input" name="liaison" type="text" placeholder="请输入联系人姓名">
              <!-- <p style="color:red;padding:10px 5px;">1231</p> -->
            </div>
            <div class="right-item">
              <p class="title">手机号：</p>
              <input data-flag='0' class="input" name="iphone" type="text" placeholder="请输入联系人手机号">
            </div>
          </li>
          <li>
            <p class="title">备注：</p>
            <input data-flag='1' class="normal-input" name="remarks" type="text" placeholder="请输入备注信息">
          </li>
          <li>
            <button class="normal-btn">开始计算</button>
          </li>
          <li class="showmsg" style="color:red;padding-left:5px;"></li>
        </ul>

      </form>
    </div>
  </section>
  <footer>
    {include file="common/footer" /}
  </footer>
  <script>
    showIsActive(4)

    function alert(msg) {
      $('.showmsg').html(msg)
    }

    function vali(el, msg, reg) {
      $(el).blur(function () {
        if (!reg.test($(this).val())) {
          //alert('提示：请输入正确的姓名格式')
          alert(msg)
          $(this).attr({
            'data-flag': 0
          })
          return
        } else {
          $(this).attr({
            'data-flag': 1
          })
          alert('')
        }
      })
    }
    vali('[name=liaison]','提示：请输入正确的姓名格式',/^([\u4e00-\u9fa5·]{2,10})$/g)
    vali('[name=iphone]','提示：请输入正确的手机格式',/^1[3-9]\d{9}$/g)
    vali('[name=remarks]','提示：请输入50个以内的中文',/^[\u4e00-\u9fa5·]{0,50}$/g)

    $('.normal-btn').click(function (e) {
      $('.right input').each(function (item) {
        if ($(this).attr('data-flag') == 0) {
          alert('提示：请填写正确的信息')
          e.preventDefault()
          return false
        } else {
          alert('')
        }
      })
    })
  </script>
</body>

</html>